<template>
  <div class="back-header">
    <div class="back-button" @click="goBack">
      <i class="fas fa-chevron-left"></i>
    </div>

    <div class="header-title">
      <span>{{ title }}</span>
    </div>

    <div class="header-right-slot">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';

// 定义一个名为 title 的 props，用于接收父组件传递的标题
defineProps({
  title: {
    type: String,
    required: true
  }
});

const router = useRouter();

// 返回上一页的方法
const goBack = () => {
  router.back();
};
</script>

<style scoped>
.back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 15px;
  background-color: #5A91FF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  border-radius: 0 0 30px 30px;
}

.back-button {
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  width: 30px; /* 固定宽度，防止返回按钮和标题挤压 */
  text-align: left;
}

.header-title {
  flex-grow: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
}

.header-right-slot {
  width: 30px; /* 保持与左侧返回按钮相同的宽度，实现对齐 */
  text-align: right;
  /* 如果没有内容，可以设置透明，但保留空间 */
  color: transparent;
}
</style>